<template>
  <div>
    <SearchBar @onSearch="handleSearch">
      <SearchBarItem label="id:" :labelLg="2">
        <Input type="text" v-model="queryParam.id.value" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="名称:" :labelLg="5">
        <Input type="text" v-model="queryParam.name.value" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
      <SearchBarItem label="编码:" :labelLg="5">
        <Input type="text" v-model="queryParam.code.value" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="上级:" :labelLg="5">
        <RemoteCascader
          :api="orgApi"
          valueKey="id"
          v-model="queryParam.parentIds.value"
          needQueryParam
          :queryParam="{
            parentId:{
              value: ';'
            }
          }"
          afterQueryParam="parentId"
          lastValue
          clearable
        />
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columns">
      <Authc permissions="auth:org:add">
        <Button type="primary" @click="handleAdd">新增</Button>
      </Authc>
    </RemoteTable>
    <Modal v-model="showAddForm" title="新增" footer-hide>
      <AddForm v-if="showAddForm" />
    </Modal>
    <Modal v-model="showEditForm" title="修改" footer-hide>
      <EditForm v-if="showEditForm" :id="editId" />
    </Modal>
  </div>
</template>

<script>
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteCascader from "@/components/RemoteCascader";
import config from "@/utils/config";
import Action from "./Action";
import { namespace, module as myModule } from "./module";
import { Button, Input, Modal, Message } from "view-design";
import AddForm from "./AddForm";
import EditForm from "./EditForm";
import Authc from "@/components/Authc";
import moduleRegist from "@/utils/moduleRegist";
export default {
  name: "OrgListView",
  components: {
    RemoteTable,
    Button,
    Input,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Modal,
    AddForm,
    EditForm,
    RemoteCascader,
    Authc
  },
  data: function() {
    let vm = this;
    return {
      showAddForm: false,
      showEditForm: false,
      editId: null,
      namespace: namespace,
      columns: [
        {
          title: "id",
          key: "id",
          align: "center",
          width: 250,
          fixed: "left"
        },
        {
          title: "上级",
          key: "fullName",
          align: "center",
          width: 200,
          render(h, data) {
            let row = data.row;
            if (row.fullName.indexOf("/") == -1) {
              return h("div", "");
            } else {
              return h(
                "div",
                row.fullName.substring(
                  0,
                  row.fullName.length - (row.name.length + 1)
                )
              );
            }
          }
        },
        {
          title: "名称",
          key: "name",
          align: "center",
          width: 200
        },
        {
          title: "编码",
          key: "code",
          align: "center",
          width: 250
        },
        {
          title: "类型",
          key: "typeName",
          align: "center",
          width: 250
        },
        {
          title: "简介",
          key: "describe",
          align: "center",
          minWidth: 200
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          permissions: "",
          width: 90,
          render: function(h, data) {
            return h(Action, {
              props: {
                row: data.row
              },
              on: {
                onEdit: vm.handleEdit
              }
            });
          }
        }
      ]
    };
  },
  computed: {
    queryParam: {
      get() {
        return this.$store.state[namespace].query;
      },
      set(value) {
        this.$store.commit(`${namespace}/saveState`, {
          query: value
        });
      }
    },
    orgApi() {
      return config.serverProxy + config.authServicePath + "/org/getOptions";
    }
  },
  beforeMount() {
    moduleRegist(myModule);
  },
  methods: {
    handleSearch() {
      this.$store.dispatch(`${namespace}/query`, {
        limit: {
          currentPage: 1
        }
      });
    },
    handleAdd() {
      this.showAddForm = true;
    },
    handleEdit(row) {
      this.editId = row.id;
      this.showEditForm = true;
    }
  }
};
</script>

<style>
</style>